import { defineComponent, reactive } from "vue";
import styles from "./BatchList.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const navs = reactive({
      list: [
        {
          text: '全部',
        },
        {
          text: '一般性批改',
        },
        {
          text: '退保',
        },
      ],
      navsActived: 0,
    })
    const NavClick = (index: number) => {
      navs.navsActived = index
    }
    //导航栏
    const Navs = () => (
      <div class={styles['propertyList-nav']}>
        {
          navs.list.map((itemY: any, index: number) => (
            <div class={styles['nav-item']} onClick={() => { NavClick(index) }}>
              <span class={[styles.text,
              index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{itemY.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state = reactive({
      search:'',
      list:[]
    })
    //查询
    const search = () =>{

    }

    return () => (
      <div class={styles.batchList}>
        <div class={styles['header-box']}>
          <span>意外险批单</span>
          <div></div>
        </div>
        <div class={styles['batchList-content']}>
          <Navs />
          <div class={styles['search-box']}>
            <span>关键词：</span>
            <a-input style="width:45%;height:40px;margin-left: 10px;" v-model:value={state.search} placeholder="请输入关键字(投保单号、保单号、批单申请号、旅行社名称)"/>
            <a-button class={styles.button} onClick={()=>{ search() }}>查询</a-button>
          </div>
          <div class={styles['batchList-thead']}>
            <div class={[styles.col,styles.details]}>批单详情</div>
            <div class={[styles.col,styles.time]}>保险期间</div>
            <div class={[styles.col]}>批单类型</div>
            <div class={[styles.col]}>批单金额</div>
            <div class={[styles.col]}>状态</div>
            <div class={styles.col}>操作</div>
          </div>
          {
            state.list.length === 0 ? 
            <div class={styles['no-message']}>
              <img src={imgPath('/userCenter/no-message.jpg')} />
            </div> :
            <div>

            </div>
          }
        </div>
      </div>
    )
  }
})